<template>
  <div id="ask">
      <mt-header fixed title="加入代拿">
          <router-link to="/" slot="left">
  			  <mt-button icon="back">返回</mt-button>
  		  </router-link>
          <mt-button icon="more" slot="right"></mt-button>
  	  </mt-header>
      <div id="header">
          <img src="../../assets/help.png">
          <span id="myname">Shayna</span><br>
          <span class="span1">我要成为代拿员 | 接单</span>
          <hr>
      </div>
      <div id="body">
          <div id="choosetittle">
              <img class="smallcircle" src="../../assets/smallcircle.png">
              <span id="askBodyTittle">选择你要派送的快递</span>
              <img class="smallcircle" src="../../assets/smallcircle.png">
          </div>
          <div id="choose">
              <ul v-for="item in Messages">
                  <div class="form"><li class="expressMessage">姓名</li>{{item.HisName}}</div>
                  <div class="form"><li class="expressMessage">快递</li>{{item.HisExpress}}</div>
                  <div class="form"><li class="expressMessage">区号</li>{{item.HisNum}}</div>
                  <div class="form"><li class="expressMessage">联系方式</li>{{item.HisPhone}}</div>
                  <div class="form"><li class="expressMessage">宿舍号</li>{{item.HisLou}} {{item.HisRoom}}</div>
              </ul>
          </div><br>
          <mt-button id="askbtn1" class="askbtn" type="default" size="normal">换一个</mt-button>
          <mt-button id="askbtn2" class="askbtn" type="primary" size="normal">帮TA拿</mt-button>
      </div>
  </div>
</template>

<script>
import { Button } from 'mint-ui';
export default {
  name: 'page-search',
  data() {
      return {
          Messages: [
              {
                  HisName:'柯胜男',
                  HisExpress:'顺丰快递',
                  HisNum:3,
                  HisPhone:18814118062,
                  HisLou:'紫薇楼',
                  HisRoom:'j2113'
              }
              /*{
                  HisName:'林丹琪',
                  HisExpress:'圆通快递',
                  HisNum:7,
                  HisPhone:18814123035,
                  HisLou:'青枫楼',
                  HisRoom:'m2113'
               },*/
          ]
      }
  },
  computed: {

  }
}


</script>

<style>
#header{
  width:100%;
  height:150px;
  margin-bottom:20px;
}

#header img{
  width:150px;
  height:120px;
  float:left;
  margin-top:15px;
  margin-left:5px;
}

#myname{
  width:100px;
  height:90px;
  font-size:30px;
  text-align:left;
  line-height:90px;
  margin-right:55px;
}

.span1{
  font-size:14px;
  text-align:left;
  margin-right:20px;
  color:black;
}

hr{
  width:250px;
  size:60px;
  margin-right:30px;
  margin-top:10px;
}

#askBodyTittle{
  color:black;
}

.smallcircle{
  width:10px;
}

#choose{
  width:300px;
  height:220px;
  border:0.5px solid #B9B9B9;
  border-radius: 8px;
  margin-top:10px;
  margin:0 auto
}

#choosetittle{
  margin-bottom:10px;
}

#choose ul{
  margin-top:10px;
}

.form{
  float:left;
}

.expressMessage{
  width:75px;
  background:#92c8fb;
  border-radius: 5px;
  color:white;
  font-size:15px;
  line-height:32px;
  margin-top:7px;
  margin-left:50px;
}

#askbtn1{
  margin-right:10px;
  border:1px solid #ADADAD;
}

.askbtn{
  width:100px;
}
</style>
